Day06 - CSS (1) - Element、位置 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 6

1

Modern Web

HTML 與 CSS 學習筆記系列第 6 篇

Day06 - CSS (1) - Element、位置

12th鐵人賽 html css

2020-09-21 12:25:51

1945 瀏覽

分享至

開始之前先補充一下 Element (元素)的說明

Element (元素)

Element：簡單說元素就是一個前後完整的標籤 + 內容的組合，如下會是一個段落元素

<p>這是一個段落</p>

當有的標籤是沒有結束的標籤或是內容，稱之為空元素 (Empty Element)，如 <img>
當有的標籤內再放入標籤是一個巢狀結構，可以稱之為巢狀元素 (Nesting Element)

CSS 的位置

延續 Day02 的內容，CSS = Cascading Style Sheets (階層式樣式表)，目的是美化排版，因此可以修改網頁的樣式，那要寫在哪邊呢？大概會有這 3 種寫法

元素內：就像一開始練習時，直接寫在要改的標籤內，當然就只作用在這個標籤上的內容

<h1 style="color:red"> 標題 </h1>

頁面內：style 內，設定一個格式，因此整個標籤都會套用這個格式，如下整個網頁的 <h1>，不管幾個都會是藍色的

<head>
    <style>
        h1 {
          color: blue;
        }
    </style>
</head>

連結的檔案：在 HTML 的 <head> 內設定一個檔案，進行連結引用，把 HTML 和 CSS 分開，這會是後續使用的方法
- VS Code：可輸入 link:css + Enter，快速輸入此行
- 代表用一個連結 <link> ，rel="stylesheet" 代表關聯一個樣式表，href="style.css" 代表檔案連結位置與檔名是 style.css

<head>
    <link rel="stylesheet" href="style.css">
</head>

記得新建 style.css 的檔案，內容如下，可以發現標題變成紅色了

h1 {
    color: red;
}

CSS 檔案內的架構：寫出目標的選擇器，之後用 {} 包起來，然後輸入要設定的屬性:值，再使用;將不同的屬性設定分開

選擇器{
    屬性: 值;
    屬性: 值;
}

常見錯誤
- 檔案載入錯誤
  - 檔名錯誤，如 stylle.css
  - 路徑連結錯誤，是否有另開資料夾導致路徑錯誤
- 格式錯誤
  - 屬性設定間少了 ; 隔開，導致樣式跑掉
  - 前後結尾的 {} 缺少，導致錯誤
- 單字拼錯，導致設定錯誤，如 colr
- 從 chrome 的檢查工具 (F12) 裡面查看看是否有問題
  - Elements > Styles 看看是否有正確套用或是出現驚嘆號

參考資料

次回

繼續介紹 CSS

Day05 - HTML (3) - 列表、a、img

Day07 - CSS (2) - 選擇器、隨機假文

系列文

HTML 與 CSS 學習筆記共 31 篇

目錄

RSS系列文訂閱系列文

10 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙